Conversation
✅ Deploy Preview for redi-love ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
clementroze
left a comment
clementroze
left a comment
There was a problem hiding this comment.
Hello! note to my reviewers - lots of this was Claude-generated since im just a lil designer dabbling in frontend, but its the result of me carefully prompting my pet LLM and feeding it enough information for it to achieve the vision i had (trust trust guys)
| const TUTORIAL_CARDS: TutorialCard[] = [ | ||
| { |
There was a problem hiding this comment.
these are the first yellow tutorial cards that a user sees to learn how the system works
it includes the 3 core actions: swiping to dismiss, tapping the card to open the sheet, and opening the filters menu
| useEffect(() => { | ||
| AsyncStorage.getItem(TOUR_STORAGE_KEY).then((val: string | null) => { | ||
| setTourSeen(val === 'true'); | ||
| }); | ||
| }, []); |
There was a problem hiding this comment.
tour should only show once
| <AppText | ||
| variant="bodySmall" | ||
| style={{ color: AppColors.foregroundDimmer }} | ||
| > | ||
| RESET TOUR | ||
| </AppText> |
There was a problem hiding this comment.
Temporary button just for debugging tour
| return ( | ||
| <View | ||
| key={`${matchProfile.netid}-${m.promptId ?? matchIndex}`} | ||
| style={{ | ||
| width: width - 60, | ||
| marginRight: 12, | ||
| }} |
There was a problem hiding this comment.
All this was the old UI which we are revamping
| style={[ | ||
| styles.blob, | ||
| { | ||
| width: 180, |
There was a problem hiding this comment.
in the future we might want to make these decoration dots random position but for this MVP version i think we can just do this for now
| // Architecture: instead of rotating the cards array (which causes cards to | ||
| // jump between DOM slots, producing flashes), we keep cards fixed in the array | ||
| // and track the current "top" index. Each card slot has its own z-index driven | ||
| // by its distance from the top. The top card flies out, and only AFTER it has | ||
| // fully left the screen do we advance the index — with everything already in | ||
| // the correct visual position so no flash is possible. |
There was a problem hiding this comment.
FYI this entire part i admittedly had not much invovlement with as i had mr claude do it (the swiping, stack mechanis, shadowing, animation/morphing into the sheet, etc.)
So i just made sure to prompt Claude into making something that looked like the mocks and that felt nice to use. And i made sure to test it plenty
| const doSubmit = useCallback(() => { | ||
| // 1. Close the sheet immediately (no spring — just hide it). | ||
| expandProgress.setValue(0); | ||
| setIsExpanded(false); | ||
| setCardRect(null); |
There was a problem hiding this comment.
this is for the "Done" submission screen -
| const overlayTop = expandProgress.interpolate({ inputRange: [0, 1], outputRange: [cr.y, SHEET_TOP] }); | ||
| const overlayLeft = expandProgress.interpolate({ inputRange: [0, 1], outputRange: [cr.x, SHEET_MARGIN] }); | ||
| const overlayRight = expandProgress.interpolate({ inputRange: [0, 1], outputRange: [width - cr.x - cr.w, SHEET_MARGIN] }); | ||
| const overlayHeight = expandProgress.interpolate({ inputRange: [0, 1], outputRange: [cr.h, SHEET_HEIGHT] }); | ||
| const backdropOpacity = expandProgress.interpolate({ inputRange: [0, 1], outputRange: [0, 0.5] }); | ||
| const cardContentOpacity = expandProgress.interpolate({ inputRange: [0, 0.3, 0.5], outputRange: [1, 1, 0], extrapolate: 'clamp' }); | ||
| const sheetContentOpacity = expandProgress.interpolate({ inputRange: [0.45, 0.75, 1], outputRange: [0, 0, 1], extrapolate: 'clamp' }); | ||
| const overlayBorderBottomRadius = expandProgress.interpolate({ inputRange: [0, 1], outputRange: [24, 48] }); |
There was a problem hiding this comment.
lol this downward curving slope caused by the syntax highlighting is visually quite nice :)
|
|
||
| return ( | ||
| <View style={styles.skipOuter}> | ||
| <Animated.View style={[styles.skipFill, styles.skipFillLeft, { transform: [{ translateX: leftTranslateX }, { translateY: fillTranslateY }] }]} pointerEvents="none" /> |
There was a problem hiding this comment.
i think one little bug that i've been trying to deal with is that there's a noticeable flash each time you swipe a card to dismiss it for later. it's minor enough to not be catastrophic but i'm still trying to figure out how to fix it 😭
| @@ -0,0 +1,230 @@ | |||
| /** | |||
There was a problem hiding this comment.
all this is TBD test placeholder data, but here's how i imagine it would look like to edit the stack manually. But ofc ideally all the cards are automatically populated.
1 participant
Changes:
FilledHomeIconcomponent._layout.tsxandindex.tsxfor tab navigation.CardContent,CardSheetContent,CardStack,cardTypes,mockCards).Features
Details
Swiping a card
Screen.Recording.2026-04-08.at.1.45.47.AM.mov
Opening a sheet from the card
Screen.Recording.2026-04-08.at.1.46.02.AM.mov
Done state
Screen.Recording.2026-04-08.at.1.46.23.AM.mov
Tour/tutorial
Screen.Recording.2026-04-08.at.1.46.45.AM.mov
FIlter menu
Screen.Recording.2026-04-08.at.1.48.41.AM.mov